<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>OpenLayers</title>
    <link href="ol.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="./js/ol.js" charset="utf-8"></script>
</head>

<body>
<div id="map" style="width: 100%"></div>
<script>
    let layerLine = new ol.layer.Vector({
        source: new ol.source.Vector({}),
        opacity: 1
    })

    let map = new ol.Map({
        // 设置地图图层
        layers: [
            // 创建一个使用Open Street Map地图源的瓦片图层
            new ol.layer.Tile({source: new ol.source.OSM()}),
            layerLine
        ],
        // 设置显示地图的视图
        view: new ol.View({
            center: [116.264172145, 40.088270844],
            projection: 'EPSG:4326',
            zoom: 18           // 并且定义地图显示层级为2
        }),
        // 让id为map的div作为地图的容器
        target: 'map'
    });

    function drawLine(lineArr) {

        let feature = new ol.Feature(
            {geometry: new ol.geom.LineString(lineArr)}
        );

        feature.setStyle(new ol.style.Style({
            stroke: new ol.style.Stroke({
                //color: '#c40800',
                color: 'black',
                width: 2
            })
        }))

        layerLine.getSource().addFeature(feature);

    }

    let lineArr = [
        [{
            "x": 39.24481158281995,
            "y": 115.8254620785249,
            "z": 0.0
        }, {
            "x": 39.26407977670133,
            "y": 115.8402989729992,
            "z": 0.0
        }],
        [{
            "x": 39.24478369851605,
            "y": 115.8255220473351,
            "z": 0.0
        }, {
            "x": 39.26405222709794,
            "y": 115.8403589355059,
            "z": 0.0
        }],
        [{
            "x": 39.24475622400647,
            "y": 115.8255806771779,
            "z": 0.0
        }, {
            "x": 39.26402446872132,
            "y": 115.8404187391947,
            "z": 0.0
        }],
        [{
            "x": 39.24472824374561,
            "y": 115.8256400683271,
            "z": 0.0
        }, {
            "x": 39.26399647513949,
            "y": 115.8404775386841,
            "z": 0.0
        }],
        [{
            "x": 39.24470072483505,
            "y": 115.8256996602352,
            "z": 0.0
        }, {
            "x": 39.26396869486684,
            "y": 115.8405387677818,
            "z": 0.0
        }],
        [{
            "x": 39.24467300028525,
            "y": 115.8257594061093,
            "z": 0.0
        }, {
            "x": 39.26394080789611,
            "y": 115.8405983301304,
            "z": 0.0
        }],
        [{
            "x": 39.24464497453881,
            "y": 115.8258196550421,
            "z": 0.0
        }, {
            "x": 39.2639134832806,
            "y": 115.8406573849462,
            "z": 0.0
        }],
        [{
            "x": 39.24461684232934,
            "y": 115.8258800678687,
            "z": 0.0
        }, {
            "x": 39.26388511397821,
            "y": 115.8407182644232,
            "z": 0.0
        }]
    ]

    for (let i = 0; i < lineArr.length; i++) {
        let line = [];

        for (let j = 0; j < lineArr[i].length; j++) {
            line.push([lineArr[i][j].y, lineArr[i][j].x])
        }
        drawLine(line)
    }

    map.getView().setCenter([115.8254620785249, 39.24481158281995])

</script>
</body>

</html>
